<template>
	<div class="poCustomerMine">
		<group class="salesDataDiscoveryGroup">
			<div style="margin-top: 5px; margin-bottom: 5px; z-index: 999">
				<span style="font-weight: bold; font-size: 15px; padding-left: 5px">客户信息</span>
				<!--<img slot="icon" style="width: 20px;float: left;margin-top: 5px;margin-left: 5px;" src="@/assets/svg/icon_ihelp.svg" @click="loadInfo">-->
				<button-tab class="btnTabCustomer">
					<button-tab-item :selected="page === 'myRawCustomer'" @on-item-click="fetchData(8)">原始单</button-tab-item>
					<button-tab-item :selected="page === 'myPoCustomer'" @on-item-click="fetchData(0)">准客户</button-tab-item>
					<button-tab-item :selected="page === 'myCustomer'" @on-item-click="fetchData(1)">客户</button-tab-item>
				</button-tab>
			</div>
		</group>

		<div v-if="page == 'myRawCustomer'">
			<MyRawCustomerList curURL="ai/sales/pages/getMyCustomerModel" :orderBy="orderBy" :sequence="sequence" :username="username" jumpToObjectDetails="customerDetails" status="8"></MyRawCustomerList>
		</div>
		<div v-if="page == 'myPoCustomer'">
			<MyPoCustomerList curURL="ai/sales/pages/getMyCustomerModel" :orderBy="orderBy" :sequence="sequence" :username="username" jumpToObjectDetails="customerDetails" status="0"></MyPoCustomerList>
		</div>
		<div v-else-if="page == 'myCustomer'">
			<MyCustomerList curURL="ai/sales/pages/getMyCustomerModel" :orderBy="orderBy" :sequence="sequence" :username="username" jumpToObjectDetails="customerDetails" status="1"></MyCustomerList>
		</div>

		<div v-transfer-dom>
			<x-dialog v-model="showDialogStyle" class="iHelpDialog">
				<p class="iHelpDialogTitle">{{iHelpTitle}}<x-icon type="ios-close-outline" style="fill:white;float: right;" @click="closeDialogStyle"></x-icon></p>
				<!--<div class="img-box" style="height:350px;padding:15px 10px;overflow:scroll;-webkit-overflow-scrolling:touch;">
					<p v-for="(item,index) in items">
						<span style="font-weight: bold; font-size: 18px;color: yellow">{{index+1}}. {{item.value}}</span><br>
						<span v-html="item.value_description"></span>
					</p>
				</div>-->
				<div class="img-box" style="height:350px;padding:15px 10px;overflow:scroll;-webkit-overflow-scrolling:touch;">
					<div class="reception">
						<group-title> {{ reception }} </group-title>
						<grid :cols="3" :show-lr-borders="false" :show-vertical-dividers="false">
							<grid-item v-for="(item,index) in items" @click.native="jumpToPage(item, index)">
								<span class="grid-center">{{item.value}}</span>
							</grid-item>
						</grid>
					</div>
					<div class="refusePoints">
						<group-title> {{ refusePoints }} </group-title>
						<grid :cols="3" :show-lr-borders="false" :show-vertical-dividers="false">
							<grid-item v-for="i in 8" :key="i">
								<span class="grid-center">{{i}}</span>
							</grid-item>
						</grid>
					</div>
					<!--<p v-for="(item,index) in items">
						<span style="font-weight: bold; font-size: 18px;color: yellow">{{index+1}}. {{item.value}}</span><br>
						<span v-html="item.value_description"></span>
					</p>-->
				</div>
			</x-dialog>
		</div>

		<div v-transfer-dom>
			<x-dialog v-model="showDialogStyleContent" class="iHelpDialog">
				<p class="iHelpDialogTitle">{{curItem.value}}<x-icon type="ios-close-outline" style="fill:white;float: right;" @click="closeDialogStyleContent"></x-icon></p>
				<div class="img-box" style="height:350px;padding:15px 10px;overflow:scroll;-webkit-overflow-scrolling:touch;">
					<div class="reception">
						<span v-html="curItem.value_description"></span>
					</div>
				</div>
				<x-button v-if="!isLastContent" class="btn_confirm_ihelp" @click.native="jumpToPage(items[curIndex+1],curIndex + 1)">{{nextTitle}}</x-button>
				<x-button class="btn_cancel_ihelp" @click.native="goNavigator">导航页</x-button>
			</x-dialog>
		</div>
	</div>
</template>

<script>
	import bus from '@/event/eventBus'
	import NetWorking from '@/utils/networking'
	import MyRawCustomerList from '../../../../components/mobile/scroller/scrollerMyRawCustomerList'
	import MyPoCustomerList from '../../../../components/mobile/scroller/scrollerMyPoCustomerList'
	import MyCustomerList from '../../../../components/mobile/scroller/scrollerMyCustomerList'
	import MemberDetailsList from '../../../../components/mobile/scroller/scrollerMember'
	import {Group, Cell, XButton, Grid, GridItem, ButtonTab, ButtonTabItem, TransferDom, XDialog, CellFormPreview, Flexbox, FlexboxItem, GroupTitle} from 'vux'
	export default {
		name: "customer",
		components: {
			Group,
			Cell,
			XButton,
			Grid,
			GridItem,
			MemberDetailsList,
			MyPoCustomerList,
			ButtonTab,
			ButtonTabItem,
			MyRawCustomerList,
			MyCustomerList,
			XDialog,
			CellFormPreview,
			Flexbox,
			FlexboxItem,
			GroupTitle
		},
		directives: {
			TransferDom
		},
		data() {
			return {
				showDialogStyle: false,
				showDialogStyleContent: false,
				title: '准客户总览',
				items: [],
				orderBy: 'time',
				sequence: 'desc',
				username: '',
				page: 'myRawCustomer',
				type: 'S_LOV_AI_RAW_CUS',
				iHelpTitle: '电话邀约话术',
				curIndex: 0,
				curItem: '',
				isLastContent: false,
				reception: '接待',
				refusePoints: '抗拒点分析',
				nextTitle: '',
				nextItem: '',
				nextIndex: 0
			}
		},
		beforeRouteLeave(to, from, next){
			//存储当前页面信息

			this.$store.commit('CREATE_URL_PARAMS', {name: from.name, params: this.page})
			next()
		},
		created: function () {
			bus.$emit("barController", 0)
			bus.$emit("userDefinedEvent", 1)

			this.$store.commit('FETCH_URL_PARAMS')
			if(this.$store.state.user.urlParamsMap !=null && this.$store.state.user.urlParamsMap["customer"] != null){
				this.page = this.$store.state.user.urlParamsMap["customer"].params
			}

			this.username = this.$store.state.user.userModel.sysUser.username
			if(sessionStorage.orderBy != null){
				this.orderBy = sessionStorage.orderBy
			}

			if(sessionStorage.sequence != null){
				this.sequence = sessionStorage.sequence
			}

		},
		watch: {
			page: function () {
				switch (this.page){
					case 'myRawCustomer':
						this.type = 'S_LOV_AI_RAW_CUS'
						this.iHelpTitle = '电话邀约话术'
						break
					case 'myPoCustomer':
						this.type = 'S_LOV_AI_PO_CUS'
						this.iHelpTitle = '面谈话术'
						break
					case 'myCustomer':
						this.type = 'S_LOV_AI_RENEW_CUS'
						this.iHelpTitle = '续约话术'
						break
				}
			}
		},
		methods: {
			closeDialogStyleContent: function () {
				this.showDialogStyleContent = false
				bus.$emit("barController", 0)
				bus.$emit("userDefinedEvent", 1)
			},
			closeDialogStyle: function () {
				this.showDialogStyle = false
				bus.$emit("barController", 0)
				bus.$emit("userDefinedEvent", 1)
			},
			goNavigator: function () {
				this.curItem = ''
				this.curIndex = 0
				this.showDialogStyle = true
				this.showDialogStyleContent = false
			},
			jumpToPage: function (item, index) {
				if(index == this.items.length - 1){
					this.isLastContent = true
					this.curItem = item
					this.curIndex = index
				}else{
					this.isLastContent = false
					this.curItem = item
					this.curIndex = index

					this.nextItem = this.items[index + 1]
					this.nextIndex = index + 1
					this.nextTitle = this.nextItem.value
				}
				this.showDialogStyle = false
				this.showDialogStyleContent = true

			},
			loadInfo: function () {
				let _this = this
				NetWorking.doGet(
					'list_of_value/getListOfValueByType',
					null,
					{
						params:{
							"type": this.type
						}
					}
				).then(
					response => {
						let rs = response.data
						if(rs.error_code == 0){
							_this.items = rs.list_of_value
							bus.$emit("barController", 9)
							_this.showDialogStyle = true
						}else{
							alert("rs.error_message")
						}
					}
				)
			},
			fetchData: function (value) {
				switch(value){
					case 0:
						this.page = 'myPoCustomer'
						break
					case 1:
						this.page = 'myCustomer'
						break
					case 8:
						this.page = 'myRawCustomer'
						break
					default:
						this.page = 'myPoCustomer'
						break
				}
			}
		}
	}
</script>

<style>
	.iHelpDialogTitle {
		padding:15px 10px;
		font-weight: bold;
		font-size: 20px;
	}

	.img-box {
		height: 350px;
		overflow: hidden;
	}
	.vux-close {
		margin-top: 8px;
		margin-bottom: 8px;
	}

	.iHelpDialog > .weui-dialog {
		text-align: left;
		width: 100%;
		height: 80%;
		max-width: initial;
		background: transparent;
		color: white;
	}

	.iHelpDialog > .weui-mask {
		background: rgba(0, 0, 0, 0.8);
	}

	.iHelpGroup {

	}

	.iHelpGroup > .weui-cells {
		background: transparent;
		color: white;
	}

	.iHelpGroup > .weui-cells:before{
		border-top: 0px solid #D9D9D9 !important;
	}

	.iHelpGroup > .weui-cells:after{
		border-bottom: 0px solid #D9D9D9 !important;
	}

	.iHelpCell > .vux-cell-bd > p > .vux-label {
		width: 60px;
	}

	.iHelpCell > .weui-cell__ft{
		text-align: left;
		padding: 15px;
		color: white;
	}


	.btnTabCustomer{
		width: 180px;
		float: right;
		margin-bottom: 5px;
		margin-right: 5px;
	}

	.btnTabCustomer > .vux-button-tab-item{
		font-size: 12px;
	}

	.salesDataDiscoveryGroup > .weui-cells {
		z-index: 999;
		font-size: 17px !important;
	}

	.grid-center {
		display: block;
		text-align: center;
		color: #666;
	}

	.grid-center-name{
		display: block;
		text-align: center;
		color: #43abe3;
	}

	.poCustomerMine {
		margin-top: 46px;
	}

	.poCustomerMine > .weui-grids > .weui-grid {
		padding: 10px 0px;
		text-decoration: none;
		font-size: 12px;
	}

	.memberStatusTitle {
		background-color: lightgoldenrodyellow;
		z-index: 999;
	}

	.memberStatusCell {
		background-color: white;
	}

	.memberStatusGroup > .weui-cells {
		z-index: 999;
	}

	.reception{

	}

	.reception > .weui-grids:before {
		border-top: 0px solid #D9D9D9 !important;
	}

	.reception > .weui-grids >.weui-grid:after{
		border-bottom: 0px solid #D9D9D9 !important;
	}

	.refusePoints{

	}

	.refusePoints > .weui-grids:before {
		border-top: 0px solid #D9D9D9 !important;
	}

	.refusePoints > .weui-grids >.weui-grid:after{
		border-bottom: 0px solid #D9D9D9 !important;
	}

	.btn_confirm_ihelp {
		background: orange !important;
		color: white !important;
	}

	.btn_cancel_ihelp {
		background: gray !important;
		color: white !important;
	}
</style>